import React from 'react'

const Express = () =>
{
    // 钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 设置状态
    const [tel,setTel] = React.useState('')
    const [express,setExpress] = React.useState([])
    const [LoginUser,setLoginUser] = React.useState(React.$LoginUser)
    const [searchParams] = React.$Router.useSearchParams()
    const [id,setId] = React.useState(searchParams.get('id'))

    const [info, SetInfo] = React.useState({
        product: {},
        business: {},
        express: {},
    })

    React.useEffect(() => {
        let LoginUser = React.$Cookie.load('LoginUser') ? React.$Cookie.load('LoginUser') : {}

        setLoginUser(LoginUser)

        getInfoData()

        
    },[])

    const getInfoData = async () =>
    {
        let result = await React.$Api.LeaseInfo({id:id})

        if(result.code === 1)
        {
            SetInfo(result.data.info)
            setTel(result.data.tel)

            getExpressData()
        }
        else
        {
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg,
                onClose:() => {
                    navigate(-1)
                }
            })
        }
    }

    const getExpressData = async () =>
    {
        let result = await React.$Api.LeaseExpress({id:id})

        if(result.code === 1)
        {
            setExpress(result.data)
        }
        else
        {
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg,
                onClose:() => {
                    navigate(-1)
                }
            })
        }
    
    }

    const onBack = () =>
    {
        navigate(-1)
    }

    const onContact = () =>
    {
        React.$Vant.Dialog.confirm({
            title:'拨打电话',
            message:'是否确认拨打官方客服热线？'
        }).then(async (res) => {
            window.location.href = `tel:${tel}`

        }).catch((err) => {
            console.log(err)
        })
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='物流详情'
                    zIndex="10"
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <div className="zy_module_content">
                <div className="swiper-container vip_user_order">
                    <div className="swiper-slide">
                        <ul>
                            <li style={{ borderBottom: 'none' }}>
                                <div className="vip_order_goods">
                                    <h3>
                                        <React.$Router.NavLink to={`/product/product/info?pid=${info.proid}`}>
                                            <i><img src={info.product.thumbs_text} /></i>
                                            <dl>
                                                <dd>
                                                    <em>联系人：</em>
                                                    <em>{info.business.nickname}</em>
                                                </dd>
                                                <dd>
                                                    <em>联系电话：</em>
                                                    <em>{info.business.mobile}</em>
                                                </dd>
                                                <dd>
                                                    <em>下单时间：</em>
                                                    <em>{info.createtime_text}</em>
                                                </dd>
                                                <dd>
                                                    <em>配送方式：</em>
                                                    <em>{info.express.name}</em>
                                                </dd>
                                                <dd>
                                                    <em>配送单号：</em>
                                                    <em>{info.expcode}</em>
                                                </dd>
                                                <dd>
                                                    <em>配送地址：</em>
                                                    <em>{info.address}</em>
                                                </dd>
                                            </dl>
                                        </React.$Router.NavLink>
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div className="lianxi_ge">
                <a onClick={onContact}>联系客服</a>
            </div>
            <div className="rem2"></div>

            <React.$Vant.Steps direction="vertical" active={0}>
                {express.map((item, key) => {
                    return (
                        <React.$Vant.Steps.Item key={key}>
                            <h3>{item.status}</h3>
                            <p>{item.time}</p>
                        </React.$Vant.Steps.Item>
                    )
                })}
            </React.$Vant.Steps>
        </>
    )
}

export default Express